{% extends 'universal/myself_base.html' %}
{% block title %}修改邮箱{% endblock %}
{% block page_content %}
    {# 表单代码(除提交按钮)参考profile.html中，但加了列偏移和name属性(user.py中取输入框的值要用)(短信登录时因表单是用类渲染的，自带name属性，所以不用手动加name后端就能取值)。因提交按钮在栅格系统中默认占1格，无法通过列偏移水平居中，所以放在栅格系统外 #}
    <form method="post"><!--action指定接收表单数据的地方，默认是当前路由-->
        <div class="row">
            <div class="form-group col-md-6 col-md-offset-3">
                <label for="old_email">原邮箱：</label>
                <input type="email" class="form-control" id="old_email" value="{{ current_user.email }}" disabled="disabled">
            </div>
            <div class="form-group col-md-6 col-md-offset-3">
                <label for="new_email">新邮箱：</label>
                <input type="email" class="form-control" id="new_email" name="new_email" placeholder="请输入新邮箱，并点击发送验证码" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" oninvalid="setCustomValidity('邮箱格式不正确');"><!--这里正则开头结尾不能加/，加了后虽然实际邮箱正确但会匹配失败。提交时才触发oninvalid事件(但下面也写了Ajax验证)，也可以写在js里，from https://blog.csdn.net/nep_tune/article/details/51223647和https://blog.csdn.net/heyue_99/article/details/53116292-->
                <span class="label label-info" id="send_verification_code" style="font-size:13px;">发送验证码</span><!--复制bootstrap的标签代码-->
                <span id="tip"></span><!--用于显示提示信息-->
            </div>
            <div class="form-group col-md-6 col-md-offset-3">
                <label for="verification_code">验证码：</label>
                <input type="text" class="form-control" id="verification_code" name="verification_code" placeholder="查看新邮箱中的验证码，并输入在这里">
            </div>
        </div>
        <div style="text-align:center"><button type="submit" class="btn btn-default" >提交</button></div>
    </form>
{% endblock %}
{% block scripts %}{# JavaScript代码参考login.html中 #}
    {{ super() }}
    <script>
        $(function (){ //使用jQuery时，JavaScript代码直接写在$()内
            var flag=0 //邮箱验证通过后置为1
            $('#new_email').blur(function (){
                let email=$('#new_email').val()
                if(!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email))){ //正则from http://c.runoob.com/front-end/854
                    $('#tip').css({'color':'red','font-size':'13px'}) //格式from jQuery手册。css代码也可以写在block styles内，并放在<style>标签里，就像这段js代码放在block scripts内，并放在<script>标签里，都要加super()
                    $('#tip').text('') //清除上次的提示
                    $('#tip').text('新邮箱格式不正确')
                }else {
                    flag=1
                    $('#tip').text('')
                }
            })
            $('#send_verification_code').click(function (){
                if(flag===1){
                    let email=$('#new_email').val()
                    $('#tip').css({'color':'red','font-size':'13px'})
                    $('#tip').text('') //清除上次的提示，特意放在发送Ajax请求之前，因放在这里的话触发提示时会闪烁一下，是点击"发送验证码"后的反馈，特别是多次点击时表示又发送了新的验证码，用户体验比写在发送Ajax请求之后(register.html中注册时写法，那里不需要闪烁)好
                    $.post("{{ url_for('user.send_verification_code_to_email') }}",{email:email},function (data){ //发送Ajax请求，同register.html中
                            if(data.flag==200)
                                $('#tip').text(data.message)
                            else if(data.flag==300)
                                $('#tip').text(data.message)
                            else if(data.flag==400)
                                $('#tip').text(data.message)
                        })
                }
            })
        })
    </script>
{% endblock %}